<template>
  <div class="modal-overlay" @click="close">
    <div class="modal-content delete-index-modal" @click.stop>
      <div class="modal-header">
        <h3>删除索引</h3>
        <button class="modal-close" @click="close">×</button>
      </div>
      <div class="modal-body">
        <div class="delete-index-list">
          <div 
            v-for="index in indices" 
            :key="index"
            class="index-item"
            :class="{ selected: selectedIndices.includes(index) }"
            @click="toggleIndexSelection(index)"
          >
            {{ index }}
          </div>
        </div>
        <div class="delete-actions">
          <button @click="close" class="btn btn-default">取消</button>
          <button 
            @click="showDeleteConfirm" 
            class="btn btn-danger"
            :disabled="selectedIndices.length === 0 || deletingIndices"
          >
            <span v-if="deletingIndices">删除中...</span>
            <span v-else>删除 ({{ selectedIndices.length }})</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeleteIndexModal',
  props: {
    indices: {
      type: Array,
      default: () => []
    },
    selectedIndices: {
      type: Array,
      default: () => []
    },
    deletingIndices: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close() {
      this.$emit('close');
    },
    toggleIndexSelection(index) {
      this.$emit('toggle-index-selection', index);
    },
    showDeleteConfirm() {
      this.$emit('show-delete-confirm');
    }
  }
}
</script>